iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

我的JavaScript日常系列 第 1

JavaScript Day 1. 基礎字串處理

  • 分享至 

  • xImage
  •  

今天是「我的JavaScript日常」的第一天,希望能透過分享與大家一起學習、提升。

在我的學習經驗中,剛開始學習 JavaScript 的時候,從字串開始練習感覺是能最快上手,並且不會有太多挫折感的,其中的好處是幫助我們快速建立一點 JavaScript 的基本觀念,又因為概念很簡單,其實在練習的時候會是一個很有趣的過程。

字串相加

這邊我們練習字串與字串如何相加。

let friendName = 'Ada';
let content = '你好嗎?';
console.log(friendName + content); // 'Ada你好嗎?'

// 加上空白鍵的字串相加
console.log(friendName + ' ' + content); // 'Ada 你好嗎?'

// 或是直接在宣告一個變數
let total = friendName + ' ' + content;
console.log(total); // 'Ada 你好嗎?'

數字與字串相加

可以了解到字串與字串相加以及字串與數字相加,也可從中理解到 JavaScript 在什麼情況下會幫助轉型。

let myName = 'Ada';
let age = 25;
let total = myName + age;
// 這個部分我們會看到,明明是數字,卻變成字串了,
// 這裡我們可以知道 JavaScript 在某些情況下,會為了嘗試連接而轉型
console.log(typeof total); // string

// 接著我們來嘗試讓它變成一個完整的句子
console.log('Hi 我是' + myName + ' ' + '我今年' + age + '歲。')
// Hi 我是Ada 我今年25歲。

NaN可能產生的情況

也補充一些字串有可能會出現 NaN 的情況,但不會很清楚的解釋什麼是 NaN,簡單來說這算是一種找不到數值的錯誤狀態。

let myName = 'Ada';
let age = 25;
let total = myName * age;
console.log(total); // NaN

let age = '25'; // string

// parseInt 將字串轉形成數字
let age = parseInt('25'); // number

// parseInt 無法將字串轉型
let age = parseInt('Ada'); // NaN

計算字元 Length

length 其實是很好用的方法,針對能夠計算字元的特性,能夠使用在很多地方簡單到只是計算字元,複雜到我們能夠限制使用者輸入的字數。

a = '154312';
console.log(a.length); // 6

// 再給一個有趣的範例
let name = ' Ada ';
console.log(name.length); // length 也會把空行算做字元,所以這邊是 5

// 如果不希望空行被算進去,可以這樣寫
console.log(name.trim()); 
// trim 可以把頭尾濾掉,這可以避免使用者在輸入資訊時不小心空行的狀態

記憶變數長度

上面我們已經知道 length 可以幫我們計算字元的長度,這邊要再討論假設我們希望 length 計算後的字元結果能夠被記憶呢?其實也是非常簡單就可以理解的方式。

let name = 'Ada';
let nameLength = name.length;
console.log(nameLength); // 3

樣版字面值 (Template literals)

從第一跟第二個範例我們可以看到,字串的相加相當的冗長跟麻煩,但 ES6 改善了這樣的冗長,接下來的字串相加會看起來非常的舒服不雜亂。

let myName = 'Ada';
let age = 25;
let content = `Hi,我是${myName},我今年${age}歲。`;

console.log(content); // Hi,我是Ada,我今年25歲。

以上許多關於字串的例子在這裡分享,這個部分還不會感受到 JavaScript 的難度,不過這裡有很多地方其實也需要好好的記得並且熟練,在日後學到更多語法的時候會發現,很多都是來自於基礎,能夠熟透基礎才能更加活用,至少現在的我是有感覺基礎沒有練熟的痛苦XD


下一篇
JavaScript Day 2. 關於,運算子們
系列文
我的JavaScript日常31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言